<template>
 	<div>
 		<van-card class="a" v-for="(item,i) in contactList" :key="i" 
 		:title="item.name+' '+item.email+' '+item.help" 
 		@click="onDetail(item.id)" />
		<van-button class="goto" type="primary" text="联系我们" @click="show = true" />
		<van-overlay :show="show" @click="show = false">
			<div class="wrapper" @click="show = false">
			    <div class="block">
					<h3>提示</h3>
					<h5 class="c">系统维护中，可打客户电话咨询</h5>
					<h2 class="d">159864</h2>
				</div>
			</div>
		</van-overlay>
 	</div>
 </template>
 
 <script>
 	//1.导入封装后的接口
 	import {
 		getContactListAPI
 	} from "@/api/contact.js";
 	export default {
 		data() {
 			return {
 				contactList: [], //列表	
				show: false,
 			}
 		},
 
 		//生命周期的钩子函数，当实例别创建好了后被调用
		created() {
			this.getContactList();
		},

 		methods: {
 			//获取列表
 			getContactList() {
 				//2.使用封装后的接口
 				getContactListAPI().then((result) => {
					result.data.forEach(item => {
						this.contactList.push({
							id: item.id,
							name: item.name,
							email: item.email,
							help:item.help,
						});
					});
 				});
 			},
 
 			onDetail(id) {
 				this.$router.push({
 					name: 'contactEdit',
 					params: {
 						id 
 					},
 				});
 			},
 		},
 	}
 </script>
 
 <style>
	 .a{
		 height: 40px;
		 font-size: 15px;
	 }
	.goto {
	 	text-align: center;
		width: 95%;
		margin-left: 15px;
		margin-top: 20px;
	 }
	 .wrapper {
	     display: flex;
	     align-items: center;
	     justify-content: center;
	     height: 100%;
	   }
	 
	   .block {
	     width: 300px;
	     height: 200px;
	     background-color: #fff;
	   }
	   h3{
		   margin-left: 125px;
	   }
	   .c{
		   margin-left: 60px;
	   }
	   .d{
		   margin-left: 105px;
	   }
 </style>
 